<template>
  <div style="display: flex">
    <div style="flex: 1;">
      <span :class="collapseBtnClass" style="cursor: pointer;font-size: 18px" @click="collapseClick"></span>
      <!--面包屑头部-->
      <el-breadcrumb separator="/" style="display: inline-block;margin-left: 10px">
        <el-breadcrumb-item :to="'/'" >首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{  currentPathName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--动态显示当前时间-->
    <span style="margin-right: 450px" class="animate__heartBeat">
      <el-tag style="font-size: 16px">{{ dateFormat(nowDate) }}</el-tag>
    </span>
    <!--日历组件-->
    <el-button type="success" class="animate__animated animate__bounce" icon="el-icon-date" circle size="mini" style="margin-right: 30px;height: 40px;width: 38px;margin-top: 8px" @click="showCalendar"></el-button>
    <el-drawer
        title="日历"
        :visible.sync="drawerVisible"
        size="50%">
      <el-calendar v-model="value">
      </el-calendar>
    </el-drawer>
    <el-dropdown style="cursor: pointer;text-align: right" @command="handleCommand">
      <div style="display: inline-block">
        <img :src="user.avatar" alt="头像" style="width: 30px;border-radius: 50%;position: relative;top: 10px;right: 5px;">
        <span>{{ user.username }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
      </div>
      <el-dropdown-menu slot="dropdown" style="width: 100px;text-align: center">
        <el-dropdown-item command="person">个人中心</el-dropdown-item>
        <el-dropdown-item command="logout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: {
    collapseBtnClass: String,
    user: Object
  },
  data() {
    return {
        nowDate: new Date(),
      drawerVisible: false,
      value: new Date()
    }
  },
  methods: {
    //子组件调用父组件方法
    collapseClick() {
      this.$emit('collapse')
    },
    handleCommand(command) {
      if (command === "logout") {
        this.$store.commit("logout")
        // this.$router.push("/login")
        // localStorage.removeItem("user")
        // this.$message.success("退出成功")
      }
      if (command === "person") {
        this.$router.push("/person")
      }
    },
    dateFormat() {
      var date = new Date()
      var year = date.getFullYear()
      //在日期格式中，月份是从0开始的。使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      let week = date.getDay() // 星期
      let weekArr = [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ]
      // 拼接 时间格式处理
      return year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds + ' ' + weekArr[week]
    },
    showCalendar() {
      this.drawerVisible =  true
    }
  },
  computed: {
    currentPathName() {
      return this.$store.state.currentPathName
    }
  },
  mounted() {
    let _this = this
    this.timer = setInterval(function () {
      _this.nowDate = new Date().toLocaleString();
    });
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>

</style>